<template>
  <div id="container-bar">
  </div>
</template>

<script>
import { Chart } from '@antv/g2';

export default {
  name: 'BarChart',
  components: {
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
  },
  watch: {
    chartData: {
      handler(val) {
				setTimeout(() => {
					let data = val;
					this.chart = new Chart({
						container: 'container-bar',
						autoFit: true,
						height: 230,
					});
					this.chart.data(data);
					this.chart.scale({
						value: {
							nice: true,
							alias:'数量',
						}
					});
					this.chart.tooltip({
						showMarkers: false,
					});
					this.chart.interval().position('type*value');
					this.chart.interaction('element-active');
					this.chart.render();
				}, 300)
      },
			immediate: true
    }
  },
  computed: {},
  methods: {
  },
  beforeDestroy() {
    this.chart.destroy()
  },
}
</script>

<style lang='scss' scoped>
</style>
